<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>配置路由表</title>
</head>

<body>
    <div id="app">
        <h2>实现一个路由表，能够根据路由表实现组件的跳转</h2>
        <a href="#hash1">跳转到hash1</a>
        <a href="#hash2">跳转到hash2</a>
        <a href="#23123">随机的锚点1</a>
        <a href="#23124">随机的锚点2</a>
        <component :is="routerMap[url]||notfind"></component>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        // 基本监听能力
        window.addEventListener('hashchange', () => {
            vm.url = window.location.hash.slice(1);// 赋值给vm.url
        });
        // 路由组件
        const hash1 = {
            name:"hash1",
            render(h) {
                return h('h3', '这里是hash1组件');
            },
        };
        const hash2 = {
            name:"hash2",
            render(h) {
                return h('h3', '这里是hash2组件');
            },
        };
        const notfind = {
            name:"notfind",
            render(h) {
                return h('h3', '404,没有找到相关页面组件');
            },
        };
        // 路由表
        const routerMap = {
            hash1,
            hash2
        };

        // vm实例
        const vm = new Vue({
            el:"#app",
            data() {
                return {
                    url: "",
                    routerMap, // 因为是模板语法，要在data选项中注册用到的数据
                    notfind
                }
            }
        });





    </script>
</body>

</html>